<template>
	<view class="safe">

		<view class="navigation" style="height: 44px;background-color: #fff;"></view>
		<!-- 导航栏 -->
		<view class="content">
			<!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
			<view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
				<view class="nav-left" @tap="uni.switchTab({
                url: '/pages/mine/mine'
            })">
					<up-icon name="arrow-left" size="22"></up-icon>
				</view>
				<view class=" nav-center">
					账号与安全
				</view>
			</view>
		</view>
		<!-- <div style="margin-top: 40px;"></div> -->
		<up-cell-group style="margin-top: 30px;" :border="false">
			<up-cell title="修改登录密码" isLink class="left-align-cell" @tap="toEditPwd"></up-cell>

			<up-cell title="注销账号" isLink class="left-align-cell" :border="false" @tap="show = true"></up-cell>
		</up-cell-group>

		<div style="
width: 630rpx;
height: 40rpx;
line-height: 40rpx;
color: rgba(154,154,154,1);
font-size: 28rpx;
text-align: left;
margin:auto;
white-space: nowrap;
margin-top:20rpx;
font-family: PingFangSC-regular;">若要修改“姓名”“手机号”，请联系所在门店店长。</div>
	</view>


	<up-modal :show="show" :showCancelButton="true" content='注销后将删除此账号的所有数据，您确定要注销此账号吗?'>
		<template #confirmButton>
			<div class="modal_btm">
				<div style="margin-right:30rpx" @tap="show = false"> 取消</div>
				<div style="color:#FF903C" @tap="deleteAccount"> 确定</div>
			</div>
		</template>
	</up-modal>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		userDeleteUser
	} from '../../utils/mine'
	const toEditPwd = () => {
		uni.navigateTo({
			url: '/pages/editPwd/editPwd'
		})
	}

	// ===========================注销账号===========================//
	//弹窗
	const show = ref(false)
	//注销账号的方法
	const deleteAccount = () => {
		show.value = false
		let userinfo = JSON.parse(uni.getStorageSync('userinfo'))
		let userId = userinfo.userId

		userDeleteUser('/user/deleteUser', {
			userId: userId
		}).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: '注销成功',
					icon: 'success',
					duration: 2000
				})
				uni.removeStorageSync('userinfo');
				uni.removeStorageSync('token');
				uni.removeStorageSync('businessId');
				uni.removeStorageSync('roleAuthority');
				uni.removeStorageSync('savedAccount');
				uni.removeStorageSync('savedPassword');
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		})

	}
</script>

<style lang="scss">
	/* =========导航栏========= */
	.topNav {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.nav-left {
		width: 20%;
		font-size: 36rpx;
		font-weight: 600;
	}

	.nav-center {
		width: 60%;
		height: 62rpx;
		padding-left: 25rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: 40rpx;
	}

	.nav-right {
		width: 20%;
		font-size: 36rpx;
		font-weight: 600;
		display: flex;
		justify-content: end;
	}

	.safe {
		width: 100%;
		height: 100vh;
		background-color: rgba(247, 248, 250, 1);
		overflow: hidden;
		/* 隐藏滚动条 */
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	/* 兼容WebKit内核浏览器 */
	.safe::-webkit-scrollbar {
		display: none;
	}

	.left-align-cell {
		background: #fff;
		margin-top: 20rpx;
	}

	.modal_btm {
		text-align: right;
		display: flex;
		width: 100%;
		justify-content: right;
	}
</style>